<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-form ref="formRef" :inline="inline" :model="form.formData" label-width="auto">
    <!-- <el-form-item v-for="item in form.formItems as unknown as any" :key="item.prop" :prop="item.prop"
      :label="item.label" :rules="item.rules">
      <el-input v-if="item.type === 'Input'" v-model="form.formData[item.prop]" :placeholder="item.placeholder"
        :style="item.style" />
      <el-select v-if="item.type === 'Select'" v-model="form.formData[item.prop]" :placeholder="item.placeholder"
        :multiple="item!.multiple" :style="item.style">
        <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value" />
      </el-select>
      <el-input-number v-if="item.type === 'InputNumber'" v-model="form.formData[item.prop]"
        :placeholder="item.placeholder" :min="item.min" :max="item.max" />
    </el-form-item>
    <el-form-item>
      <slot :form-ref="formRef"></slot>
    </el-form-item> -->
  </el-form>
</template>

<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { ref } from "vue";
import type { IFormProps } from "./type";
interface IProps {
  form: IFormProps;
  inline?: boolean
}
const { form, inline } = defineProps<IProps>();
const formRef = ref<FormInstance>();
defineExpose({
  formRef
});
</script>
